<template>
  <div class="containers">
    <el-card>
    <div class="">
      <div class="handle-box">
        <el-select v-model="filterForm.code" placeholder="文章类型" clearable size="mini" style="width: 150px;" class="mr10"
          @change="handleFilter">
          <el-option v-for="item in typeOPtions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>


        <el-select v-model="filterForm.state" placeholder="审核状态" size="mini" style="width: 150px;" class="mr10"
          @change="handleFilter">
          <el-option v-for="item in classifyOptions" :key="item.value" :label="item.label"
            :value="item.value"></el-option>
        </el-select>

        <el-button type="primary" @click="handleFilter" class="" size="mini">查询</el-button>
        <el-button @click="resetFilter" class="mr10" size="mini">重置</el-button>
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" :height="$tableHight"
        v-loading="loading" size="mini" border>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
<!--        <el-table-column prop="title" show-overflow-tooltip label="标题"></el-table-column>-->
        <el-table-column prop="brief" width="250" show-overflow-tooltip label="动态"></el-table-column>

<!--        <el-table-column prop="content" show-overflow-tooltip label="文章">-->
<!--          <template slot-scope="scope">-->
<!--            &lt;!&ndash; <div v-html="scope.row.content"></div> &ndash;&gt;-->
<!--            <el-button v-if="scope.row.content" @click="openContent(scope.row.content)" type="text"-->
<!--              size="mini">查看详情</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column prop="img" label="封面" align="center">-->
<!--          <template slot-scope="scope" v-if="scope.row.index_img">-->
<!--            <el-image class="table-td-thumb" :src="scope.row.index_img" style="width: 30px;height: 30px;"-->
<!--              :preview-src-list="[scope.row.index_img]"></el-image>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column prop="img" label="动态图片" align="center">
          <template slot-scope="scope" v-if="scope.row.img">
            <el-image
              class="table-td-thumb"
              :src="getImg(scope.row.img)[0]"
              style="width: 30px;height: 30px;"
              :preview-src-list="getImg(scope.row.img)"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>

        <el-table-column prop="video" label="视频" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.video" @click="openVideo(scope.row.video)" type="text"
              size="mini">播放视频</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="CreatedAt" label="发布时间">
          <template slot-scope="scope">
            {{ $clearTimer(scope.row.CreatedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="审核状态">
          <template slot-scope="scope">
            {{ classifyOptions[scope.row.state].label }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="toExamine(scope.row)" size="mini">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 审核弹框 -->
    <el-dialog title="审核操作" :visible.sync="dialogVisible" width="30%">
      <el-form :model="auditForm" label-width="80px">
        <el-form-item label="审核状态">
          <el-radio-group v-model="auditForm.status">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="auditForm.status === 2" label="拒绝理由">
          <el-input v-model="auditForm.reason" type="textarea" :rows="3" :maxlength="20" show-word-limit
            placeholder="请输入拒绝理由"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAudit">提 交</el-button>
      </span>
    </el-dialog>


    <el-dialog title="文章" :visible.sync="dialogVisibleContent" width="70%">
      <div v-html="content" class="content_html">

      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      dialogVisibleContent: false,
      content: '',
      dialogVisible: false, // 控制弹框显示
      auditForm: {
        id: null,
        status: 1, // 默认为审核通过
        reason: ''
      },
      filterForm: {
        state: 0,
        code: '',
      },
      query: {
        pageIndex: 1,
        pageSize: 20
      },
      typeOPtions: [
        { label: "图片", value: 0 },
        { label: "视频", value: 1 }
      ],
      classifyOptions: [

        { label: "待审核", value: 0 },
        { label: "审核通过", value: 1 },
        { label: "审核不通过", value: 2 }
      ],
      upload: "",
      tableData: [],
      pageTotal: 0,
      loading: false,
      type: 0,
      imageUrl: "",
      dealerList: [],
      teamLeaderList: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    openContent(row) {
      this.content = row
      this.dialogVisibleContent = true
    },
    // 查询按钮点击事件
    handleFilter() {
      this.query.pageIndex = 1;
      this.getData();
    },
    // 审核按钮点击事件
    toExamine(row) {
      this.dialogVisible = true;
      this.auditForm = {
        id: row.ID,
        status: 1, // 默认为审核通过
        reason: ''
      };
    },
    // 打开视频
    openVideo(videoUrl) {
      if (videoUrl) {
        window.open(videoUrl, '_blank'); // 新窗口打开视频链接
      }
    },
    // 提交审核
    submitAudit() {
      if (this.auditForm.status === 2 && !this.auditForm.reason.trim()) {
        this.$message.error('请输入拒绝理由');
        return;
      }
      this.request("admin/getExamineArticle/", "post", {
        id: this.auditForm.id,
        status: this.auditForm.status,
        reason: this.auditForm.reason
      }, "demo").then(res => {
        this.$message.success("操作成功!");
        this.getData();
        this.dialogVisible = false;
      });
    },
    // 重置筛选条件
    resetFilter() {
      this.filterForm = {
        state: 0,
        code: '',
      };
      this.handleFilter();
    },
    // 获取数据
    getData() {
      const params = {
        page: this.query.pageIndex,
        size: this.query.pageSize,
        ...this.filterForm
      };
      this.request("admin/getExamineArticle/", "get", params, "demo").then(res => {
        this.tableData = res.data.data;
        this.pageTotal = res.data.total;
        this.loading = false;
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    getImg(e) {
      // const result = e.slice(1, -1);
      const arr = e.split(",");

      return arr;
    },
  }
};
</script>

<style scoped>
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}

.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
  position: relative;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.totalBox {
  position: absolute;
  left: 40px;
}

.content_html {
  overflow-x: hidden;

  img {
    max-width: 100%;
  }
}
</style>
